<template>
	<div class="mainContent">
		<pathTracking :path="Model.path" />
		<div class="container">
			<div>
				<el-row class="detailTable">
					<div class="detailTableItemTitle">
						<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
						<p class="text">第一步  确定拆分类型</p>
					</div>
					<el-form ref="form" class="firstStep">
                        <el-form-item label="拆解单类型：">
                            <el-select v-model="Model.splitType" placeholder="请选择">
                                <el-option
                                    v-for="item in Model.splitTypeOption"
                                    :key="item.value"
                                    :label="item.value"
                                    :value="item.key">
                                </el-option>
                            </el-select>
                        </el-form-item>
						<el-form-item label="过账时间">
                            <el-date-picker
								type="date"
								placeholder="选择日期">
							</el-date-picker>
                        </el-form-item>
                        <el-form-item label="拆分原因：">
                            <el-input class="input-cont" v-model="Model.dismantlingReasons" placeholder="请输入内容"></el-input>
                        </el-form-item>
						<el-form-item label="备注：">
                            <el-input class="input-cont" v-model="Model.remark" placeholder="请输入内容"></el-input>
                        </el-form-item>
					</el-form>
				</el-row>
				<!--出库操作时 -->
				<div> 
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">第二步  添加拆解商品</p>
						</div>
						<div class="OutofstockSearch">
							<el-row class="rows basic">
								<el-col :sm="6" :md="4" :lg="3">
									<div class="items">
										<div class="btn" @click="openImportPop(1)">导入商品</div>
									</div>
								</el-col>
								<el-col :sm="12" :md="8" :lg="6">
									<el-input class="input-cont" v-model="Model.inputBarcode" placeholder="请扫码入库/输入SKU" @keyup.enter.native="checkSku"></el-input>
								</el-col>
								<el-col :sm="5" :md="3" :lg="2">
									<div class="items">
										<div class="btn" @click="checkSku">确定</div>
									</div>
								</el-col>
								<el-col :sm="5" :md="3" :lg="2">
									<label class="table-top-label">*供应商：</label>
								</el-col>
								<el-col :sm="12" :md="8" :lg="6">
									<el-select v-model="Model.Billtype" placeholder="请选择">
										<el-option
											v-for="item in Model.BilltypeOption"
											:key="item.value"
											:label="item.label"
											:value="item.value">
										</el-option>
                            		</el-select>
								</el-col>
							</el-row>
						</div>
						<div class="detailTableDetail">
							<el-table :data="Model.tableDataOut" border style="width: 100%;max-height:550px" @selection-change="handleSelectionChange">
								<el-table-column 
									v-for="item in Model.tableHeaderData"
									:key="item.prop"
									:prop="item.prop" 
									:label="item.label" 
									:width="item.width" 
								></el-table-column>
							</el-table>
						</div>
						<!--  -->
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">第三步  添加拆解后组件</p>
						</div>
						<div class="OutofstockSearch">
							<el-row class="rows basic">
								<el-col :sm="12" :md="8" :lg="6">
									<div class="items">
										<div class="btn" @click="openImportPop(2)">导入拆解物料</div>
										<div class="btn" @click="getBarcode">获取条码</div>
									</div>
								</el-col>
								<el-col :sm="5" :md="3" :lg="2">
									<label class="table-top-label">*入库仓库：</label>
								</el-col>
								<el-col :sm="12" :md="8" :lg="6">
									<el-select v-model="Model.Billtype" placeholder="请选择">
										<el-option
											v-for="item in Model.BilltypeOption"
											:key="item.value"
											:label="item.label"
											:value="item.value">
										</el-option>
                            		</el-select>
								</el-col>
							</el-row>
						</div>
						<div class="detailTableDetail">
							<el-table :data="Model.tableDataOut_two" border style="width: 100%;max-height:550px" @selection-change="handleSelectionChange">
								<el-table-column 
									v-for="item in Model.tableHeaderData"
									:key="item.prop"
									:prop="item.prop" 
									:label="item.label" 
									:width="item.width" 
								></el-table-column>
							</el-table>
						</div>
						<el-row class="bottom">
							<div class="btn_group">
								<!-- <div class="btn_item">保存</div> -->
                                <div class="btn_item" @click="submit">审批</div>
								<div class="btn_item cancel" @click="goBack">取消</div>
							</div>
						</el-row>
					</el-row>	
				</div>	
			</div>
		</div>
		<!-- 导入文件 弹窗 -->
		<el-dialog :visible.sync="Model.importFileDialog" class="minDialog">
			<div class="common-table-title">
				<div class="common-table-icon"></div>
				<div class="common-table-fl">导入文件</div>
			</div>
			<div style="background: #fff;">
				<el-row class="common-table-con">
					<div class="fileup-cont">
						<input class="fileup" type="file" name="fileup" id="fileup" v-on:change="fileChange($event)" />
						<div class="fileup-name">{{Model.fileupName}}</div>
						<div class="fileup-btn">浏览</div>
					</div>
				</el-row>
				<el-row class="dialog-btn-group">
					<div class="dialog-btn dialog-btn-confirm" @click="uploadExcel">导入摸板</div>
				</el-row>
				<el-row>
					<p class="template-name" @click="downloadExcel()">下载调拨商品导入模板</p>
				</el-row>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import pathTracking from "@/components/common/pathTracking";
	import pagination from "@/components/common/pagination.vue";
	import advancedSearch from "@/components/common/filter/advancedSearch";
	import {
		getDateString
	} from "@/assets/js/common.js";
	import Model from "./model.js";
	import Controller from "./Controller.js";
	export default {
		name: "purchase",
		mixins: [Model, Controller],
		components: {
			advancedSearch,
			pagination,
			pathTracking
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	@import "./index.less";
</style>
